var WastageItem = function () {
  var template = /* html */ `
    <div class="wastage-item has-wastage">
      <div class="wastage-item-content">
        <div class="wastage-item-baseinfo">
          <table cellspacing="0" cellpadding="0">
            <colgroup>
              <col width="27%">
              <col width="23%">
              <col width="27%">
              <col width="23%">
            </colgroup>
            <tr>
              <td>部门</td>
              <td>{{wastage.deptName}}</td>
              <td>车间</td>
              <td>{{wastage.workShopName}}</td>
            </tr>
            <tr>
              <td>当日用电量(kw·h)</td>
              <td>{{formatNumber(wastage.dayElectricUse/1000,2)}}</td>
              <td>当月用电量(kw·h)</td>
              <td>{{formatNumber(wastage.monthElectricUse/1000,2)}}</td>
            </tr>
            <tr>
              <td>当日用气量(升)</td>
              <td>{{formatNumber(wastage.dayGasUse,2)}}</td>
              <td>当月用气量(升)</td>
              <td>{{formatNumber(wastage.monthGasUse,2)}}</td>
            </tr>
            <tr>
              <td>当日用水量(升)</td>
              <td>{{formatNumber(wastage.dayWaterUse,2)}}</td>
              <td>当月用水量(升)</td>
              <td>{{formatNumber(wastage.monthWaterUse,2)}}</td>
            </tr>
            <tr>
              <td>日产能</td>
              <td>{{formatNumber(wastage.dayCapacity,2)}}</td>
              <td>月产能</td>
              <td>{{formatNumber(wastage.monthCapacity,2)}}</td>
            </tr>
          </table>
        </div>
        <div class="wastage-item-chart-content">
          <div ref="chart" class="wastage-item-chart"></div>
        </div>
      </div>
    </div>
  `;

  return {
    props: {
      wastage: Object,
      isShow: {
        type: Boolean,
        default: true
      },
      chartStartDate: String
    },

    watch: {
      isShow: function (value) {
        if (value) {
          this.showChart();
        }
      },

      maxValue: function () {
        if (this.isShow) {
          this.refreshChart();
        }
      },

      chartStartDate: function () {
        if (this.isShow) {
          this.refreshChart();
        }
      }
    },

    computed: {
      maxValue: function () {
        var maxValue = this.wastage.maxDataValue;
        if (maxValue === 0) {
          maxValue = 20;
        } else {
          maxValue = Math.max(maxValue * 1.2, 20);
          maxValue = _.ceil(maxValue, -1);
        }
        return maxValue;
      }
    },

    data: function () {
      return {
        chartOption: null
      };
    },

    mounted: function () {
      if (this.isShow) {
        this.showChart();
      }
      var self = this;
      $(this.$el).resize(function () {
        var chartDom = self.$refs['chart'];
        if (chartDom === undefined) {
          return;
        }
        var chart = echarts.getInstanceByDom(chartDom);
        if (chart !== undefined) {
          chart.resize();
        }
      });
    },

    methods: {
      getChart: function () {
        var chartDom = this.$refs['chart'];
        var chart = echarts.getInstanceByDom(chartDom);
        if (chart === undefined) {
          chart = echarts.init(chartDom);
        }
        return chart;
      },

      showChart: function () {
        chart = this.getChart();
        var option = this.getOption();
        this.resetOption(option);
        chart.setOption(option, true);
      },

      getOption: function () {
        var tooltipOption = [{
          field: 'perElectricUse',
          unit: 'w·h',
          name: '每付用电量'
        }, {
          field: 'perGasUse',
          unit: '升',
          name: '每付用气量'
        }, {
          field: 'perWaterUse',
          unit: '升',
          name: '每付用水量'
        }];

        var option = {
          legend: {
            type: 'scroll',
            top: 15,
            textStyle: {
              color: '#44D3E4',
              fontSize: 14
            },
            pageTextStyle: {
              color: '#44D3E4',
              fontSize: 14
            }
          },
          color: window.boardChartColor,
          grid: {
            right: 20,
            left: 35,
            bottom: 25,
            top: 18
          },
          tooltip: {
            trigger: 'axis',
            formatter: function (params) {
              var data = params[0].data;
              var msg = `${data.dayTime}<br>`;

              var tipMsg = [];
              for (var i = 0; i < params.length; i++) {
                var param = params[i];
                var seriesIndex = param.seriesIndex;
                var option = tooltipOption[seriesIndex];
                var field = option.field;
                var value = data[field];
                value = _.round(value, 4);
                tipMsg.push(`${param.marker}${option.name}:${value}${option.unit}`);
              }

              msg += tipMsg.join('<br>');
              return msg;
            }
          },
          xAxis: [{
            type: 'category',
            boundaryGap: false,
            axisLine: {
              lineStyle: {
                color: '#fff'
              }
            },
            axisLabel: {
              color: '#fff',
              fontSize: 12,
              formatter: function (value) {
                return moment(value).format('MM-DD');
              }
            }
          }],
          yAxis: [{
            type: 'value',
            max: 20,
            minInterval: 10,
            axisLine: {
              lineStyle: {
                color: '#fff'
              }
            },
            axisLabel: {
              color: '#fff',
              fontSize: 12
            }
          }],
          dataset: {
            source: []
          },
          series: [{
            type: "line",
            name: "每付用电量(w·h)",
            encode: {
              x: 'dayTime',
              y: 'perElectricUse'
            }
          }, {
            type: "line",
            name: "每付用气量(升)",
            encode: {
              x: 'dayTime',
              y: 'perGasUse'
            }
          }, {
            type: "line",
            name: "每付用水量(升)",
            encode: {
              x: 'dayTime',
              y: 'perWaterUse'
            }
          }]
        };
        return option;
      },

      resetOption:function(option){
        _.set(option, 'yAxis[0].max', this.maxValue);

        var records = this.chartRecords();
        _.set(option, 'dataset.source', records);
      },

      refreshChart: function () {
        var chartDom = this.$refs['chart'];
        var chart = echarts.getInstanceByDom(chartDom);
        if (chart === undefined) {
          this.showChart();
          return;
        }

        var option = {};
        this.resetOption(option);
        chart.setOption(option);
      },

      chartRecords: function () {
        var records = this.wastage.wastageRecordList;
        var chartStartDate = this.chartStartDate;
        if (chartStartDate !== undefined) {
          var index = _.findIndex(records, {
            dayTime: chartStartDate
          });
          if (index > -1) {
            records = records.slice(index, index + 10);
          }
        }
        return records;
      },

      formatNumber: function (value, decimal) {
        return SysUtil.decimalNumber(value, decimal);
      }
    },

    template: template
  };
}();
